<template>
  <div class="page flex-column">
    <div class="page-title">
      <span class="location-part"><a href="/#/my-course/list">课程</a></span>
      <span class="location-split">/</span><span class="location-current">课程详情</span>
    </div>

    <!-- 课程信息 -->
    <div class="course-info">
      <div class="cover">
        <img :src="courseDetail.preUrl+courseDetail.thumbnailUrl">
        <a class="play-btn"
          :href="'/#/player/index?courseId=' + courseDetail.id + (storeCourse.isLearning ? '' : '&seq=0')"
          target="_blank">
          <img src="@/assets/images/play.png">
        </a>
        <div class="progress" v-if="storeCourse.isLearning">
          已观看{{ storeCourse.courseProgress }}
        </div>
      </div>
      <div class="items">
        <div class="title">{{ courseDetail.name }}</div>
        <div class="stats">
          <div class="play-times">播放量 {{ courseDetail.playCnt }}</div>
          <div class="line"></div>
          <div class="duration">当前总时长：{{ formatDuration(courseDetail.duration) }}</div>
        </div>
        <div class="others">
          <div class="section-info">共{{ courseDetail.videoNum }}讲  更新到{{ courseDetail.curVideoNum }}讲</div>
          <div class="tag-list">
            <a-tag :color="courseDetail.curVideoNum>=courseDetail.videoNum ? '' : 'error'">{{ courseDetail.curVideoNum>=courseDetail.videoNum ? '已完结' : '连载中' }}</a-tag>
          </div>
        </div>
        <div class="operations">
          <div class="start">
            <a-button type="primary" shape="round"
              :href="'/#/player/index?courseId=' + courseDetail.id + (storeCourse.isLearning ? '' : '&seq=0')"
              target="_blank"
              class="start-btn flex-row flex-center">
              {{ storeCourse.isLearning ? '继续学习' : '开始学习'}}
            </a-button>
          </div>
          <div class="console">
            <a-button danger shape="round"
              :href="scnetConsoleUrl"
              @click.prevent="getScnetConsoleUrl"
              target="_blank"
              class="console-btn flex-row flex-center">
              超算控制台
            </a-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 课程详情 -->
    <div class="course-detail">
      <div class="course-tabs">
        <a-tabs tab-position="left"
          @change="changeCourseTab"
          :tabBarStyle="{width: '220px', minHeight: '550px', backgroundColor: '#FFE3E1', borderRadius: '20px 0 0 20px', padding: '20px 0'}">
          <!----- 课程简介 ----->
          <a-tab-pane key="1">
            <template #tab>
              <div class="tab-line">
                <div class="tab-line-icon">
                  <img v-if="currentCourseTab=='1'" src="@/assets/icons/course-jinjie-h.png" />
                  <img v-else src="@/assets/icons/course-jinjie.png" />
                </div>
                <div class="tab-line-title" :class="currentCourseTab=='1' ? 'active' : ''">简介</div>
              </div>
            </template>

            <div v-html="courseDetail.memo" class="tab-content"></div>
          </a-tab-pane>

          <!----- 课程目录 ----->
          <a-tab-pane key="2">
            <template #tab>
              <div class="tab-line">
                <div class="tab-line-icon">
                  <img v-if="currentCourseTab=='2'" src="@/assets/icons/course-catalog-h.png" />
                  <img v-else src="@/assets/icons/course-catalog.png" />
                </div>
                <div class="tab-line-title" :class="currentCourseTab=='2' ? 'active' : ''">目录</div>
              </div>
            </template>

            <div class="tab-content">
              <CourseCatalog :items="courseDetail.videoList" :progresses="courseProgressList" :show-progress="true" :reset-title="true">
                <template #title="{ item }">
                  <div class="title" :title="item.title">
                    <a :href="getSeqUrl(courseDetail.id, item.seq)" target="_blank">{{ item.title }}</a>
                  </div>
                </template>
              </CourseCatalog>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import useCourseStore from '@/stores/course';
import appConfig from '@/config';
import { isNotEmpty } from '@/utils';
import { miscApi } from "@/services";
import CourseCatalog from '@/components/CourseCatalog.vue';

// 当前课程tab
const currentCourseTab = ref('1');
const changeCourseTab = (key: string) => {
  currentCourseTab.value = key;
}

const formatDuration = (duration) => {
  const h = Math.floor(duration / 3600);
  const m = Math.floor((duration - h * 3600) / 60);
  const s = Math.floor(duration - h * 3600 - m * 60);
  return `${h>0 ? (h + "小时") : ""}${m>0 ? (m + "分") : ""}${s>0 ? (s + "秒") : ""}`;
}

const scnetConsoleUrl = ref("");
const getScnetConsoleUrl = async () => {
  scnetConsoleUrl.value = await miscApi.getRedirectUrl(appConfig.scnetConsole);
  window.open(scnetConsoleUrl.value, '_blank');
}

const route = useRoute();
const storeCourse = useCourseStore();
const courseDetail = ref({});
const courseProgressList = ref({});

onBeforeMount(async () => {
  const id = route.query.id;
  console.log("course id: ", id);
  if (!id) return;

  await storeCourse.getCourseDetail(id);
  courseDetail.value = storeCourse.courseDetail;

  await storeCourse.queryProgress(id);
  if (isNotEmpty(storeCourse.courseProgressList)) {
    courseProgressList.value = storeCourse.courseProgressList.reduce((map, obj) => {
      map[obj.seq] = obj.second;
      return map;
    }, {});

    console.log("courseProgressList: ", courseProgressList.value);
  }

  await miscApi.traceViewCourse(id);
});

const getSeqUrl = (courseId, seq) => {
  return `/#/player/index?courseId=${courseId}&seq=${seq}`;
}
</script>

<style lang="less" scoped>
.page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: @white-bg;

  .page-title {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    padding: 20px 30px;

    .location-part {
      cursor: pointer;
    }

    .location-split {
      padding: 0 2px;
    }

    .location-part, .location-split {
      color: @font-grey-light;
    }
    .location-current {
      color: @font-black;
    }
  }

  .course-info {
    height: 396px;
    background-color: @white;
    border-radius: 20px;
    margin: 20px 30px 0 30px;
    padding: 25px 25px 35px 25px;
    display: flex;
    flex-direction: row;

    .cover {
      width: 600px;
      height: 336px;
      border: 1px solid #E5E5E5;
      border-radius: 12px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }

      .play-btn {
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: absolute;
        top: 138px;
        left: 270px;
      }

      .progress {
        height: 24px;
        padding: 4px 8px;
        line-height: 16px;
        font-size: 14px;
        font-weight: 400;
        color: @white;
        background: rgba(0,0,0,0.7);
        border-radius: 6px;
        position: absolute;
        bottom: 12px;
        right: 6px;
      }
    }

    .items {
      flex: 1;
      margin-left: 20px;
      position: relative;

      .title {
        min-height: 36px;
        line-height: 36px;
        font-size: 24px;
        font-weight: bold;
        color: @font-black;
      }

      .stats {
        margin-top: 20px;
        display: flex;
        flex-direction: row;

        .play-times, .duration {
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 400;
        }

        .play-times {
          color: @font-grey;
        }

        .duration {
          color: @font-grey-light;
        }

        .line {
          width: 1px;
          height: 14px;
          margin: 1px 10px;
          background: #E5E5E5;
        }
      }

      .others {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .section-info {
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 400;
          color: @font-grey-light;
        }

        .tag-list {
          margin-left: 20px;
        }
      }

      .operations {
        display: flex;
        flex-direction: row;
        position: absolute;
        bottom: 0;

        .start {
          width: 160px;
          height: 44px;

          .start-btn {
            color: @white;
            width: 100%;
            height: 100%;
          }
        }

        .console {
          margin-left: 20px;
          width: 160px;
          height: 44px;

          .console-btn {
            color: @font-red;
            width: 100%;
            height: 100%;
          }
        }

        :deep(.ant-btn) {
          font-size: 20px;
          font-weight: 500;
        }
      }
    }

    :deep(.ant-tag) {
      height: 24px;
      line-height: 24px;
      background: @white-bg;
      border-radius: 12px;
      font-size: 12px;
      padding: 0 9px;
    }
  }

  .course-detail {
    background-color: @white;
    border-radius: 20px;
    margin: 22px 30px 30px 30px;
    
    :deep(.ant-tabs-nav-list) {
      .ant-tabs-tab {
        height: 60px;
        padding: 20px;

        &.ant-tabs-tab-active {
          background-color: @white;
        }

        .ant-tabs-tab-btn {
          .tab-line {
            display: flex;
            align-items: center;

            .tab-line-icon {
              width: 24px;
              height: 24px;
            }
            .tab-line-title {
              margin-left: 10px;
              height: 20px;
              line-height: 20px;
              font-size: 20px;
              font-weight: 500;
              color: @font-black;

              &.active {
                color: @red;
              }
            }
          }
        }
      }
      
      .ant-tabs-tab+.ant-tabs-tab {
        margin-top: 0;
      }

      .ant-tabs-ink-bar {
        width: 4px;
        height: 30px;
        left: 0px;
      }
    }

    :deep(.tab-content) {
      padding: 20px 30px 20px 6px;

      :deep(.video-info) {
        width: 100%;
        height: 60px;
        background: @white-bg;
        border-radius: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .title {
          flex: 1;
          height: 18px;
          line-height: 18px;
          font-size: 16px;
          font-weight: 500;
          color: @font-black;
        }
      }
    }
  }
}
</style>
